<!-- 
  @name: 活动中心
  @date: 2020.2.25
 -->
<template>
	<view class="content">
		<!-- 标题栏 -->
		<nav-title :title="title" navigate-back="1" :page-scroll="pageScroll" :back-home="!hasIndex"></nav-title>
		
		<!-- 顶部 -->
		<view class="top">
			<view class="msg">
				<view class="item ">
					<view class="t1">商家资质</view>
					<view class="t2" @tap="$navigateTo('./busi?onBusi=a&operaId=' + operaId)">
						<text class="t3">查看详情</text>
						<view class="icon"></view>
					</view>
				</view>
				<view class="item l2">
					<view class="t1">可用加注站</view>
					<view class="t2" @tap="$navigateTo('/pages/site/busi?onSite=a&operaId=' + operaId)">
						<text class="t3">查看详情</text>
						<view class="icon"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 福利一 -->
		<view class="fuli-1">
			<view class="btn" @tap="$navigateTo('/pages/user-account/recharge?operaId=' + operaId)" v-if="isAndroid">
				立即充值
			</view>
		</view>
		
		<!-- 福利二 -->
		<view class="fuli-2">
			<view class="img-1"></view>
			<view class="info">
				<view class="tip-1"></view>
				<view class="tip-2">优惠券大放送，领券加注省省省</view>
				<!-- 优惠券列表 -->
				<view class="ticket-list" v-if="lists.length > 0">
					<view class="item" v-for="(item, index) in lists" :key="item.couponId">
						<view class="left">
							<view class="mey">
								<text class="icon-1">￥</text>
								<text class="text-1" :class="item.couponAmount.length > 5 ? 't2' : ''">{{item.couponAmount}}</text>
							</view>
							<view class="fs" @tap="$navigateTo('/pages/site/busi?onSite=a&couponId=' + item.couponId)">
								<text class="text-2">可用站点</text>
								<view class="icon-2"></view>
							</view>
						</view>
						<view class="middle">
							<view class="text-1 text_over">{{item.operaName}}</view>
							<view class="text-2 text_over">
								加注满{{item.couponOrderAmount}}元可
								<text v-if="item.drawType === 0">用</text>
								<text v-else>领取</text>
							</view>
							<view class="text-3">{{item.useBeginTime.replace(/-/g, '.')}}-{{item.useEndTime.replace(/-/g, '.')}}</view>
						</view>
						<button class="right" :class="item.drawType === 0 ? 'bg1' : 'bg2'" @tap="drawTicket(item, index)">领取</button>
					</view>
				</view>
				<view class="no-ticket-list" v-if="lists.length === 0">-- 暂无优惠券活动 --</view>
			</view>
		</view>
		
		<!-- 领取成功后的弹窗 -->
		<view class="_popup center" v-if="showPopup">
			<view class="popup-info">
				<text class="t1">领取成功</text>
				<text class="t2">可在我的-优惠券中查看使用</text>
				<button class="btn_submit_popup" @tap="showPopup = false">确定</button>
			</view>
		</view>
		
		<!-- 分享 -->
		<view class="share-blank"></view>
		<view class="share">
			<button class="btn" open-type="share" @tap="shareLoading"></button>
		</view>
		
		<!-- 登录提示 -->
		<sign-in @submit="reLogin"></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',  //导航栏标题
				pageScroll: false,  //页面是否上滑，true为已上滑，false为未上滑
				operaId: 0,  //运营商id
				lists: [],  //优惠券列表
				page: 1,  //优惠券页码
				showPopup: false,  //是否显示领取弹窗
				canList: [],  //可用加注站
				isAndroid: false,  //是否为安卓系统
				hasIndex: true,  //是否有首页，若否则显示返回首页icon
			}
		},
		onLoad(e) {
			this.operaId = e.operaId || 44;
			this.hasIndex = this.$hasIndex();
			this.isAndroid = this.$isAndroid();
		
			this.getList();
		},
		onPageScroll(e) {
			if(e.scrollTop > 50) {
				this.title = '福利专区';
				this.pageScroll = true;
			} else {
				this.title = '';
				this.pageScroll = false;
			}
		},
		onReachBottom() {
			this.getList();
		},
		//分享某个页面的信息
		onShareAppMessage() {
			return {
				title: '蓝蜘蛛加注-活动中心',
				path: '/pages/site/ticket?operaId=' + this.operaId
			}
		},
		methods: {
			//重新登录
			reLogin() {
				this.lists = [];
				this.page = 1;
				this.getList();
			},
			//点击分享后loading
			shareLoading() {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				});
				setTimeout(() => {
					uni.hideLoading();
				}, this.$tmp.TIME_PUB);
			},
			//领取优惠券
			drawTicket(item, index) {
				if(!this.$store.state.token) {
					this.$store.commit('showLogin', true);
					return;
				}
				if(item.drawType === 0) {
					this.$http({
						url: this.$api.accoupon + 'getCoupon',
						data: {
							couponId: item.couponId,
							couponType: item.drawType,
							userId: this.$store.state.userId,
							forwardUserId:'',
							// recordCode: this.info.recordCode
						}
					}).then(res => {
						console.log('res', res);
						this.$successToast('领取成功');
					});
					// this.$http({
					// 	url: this.$api.couponUrl + 'receivecoupon',
					// 	data: {
					// 		couponId: item.couponId
					// 	}
					// }).then(res => {
					// 	this.showPopup = true;
					// });
				}
			},
			//获取优惠券
			getList() {
				if(!this.operaId) return;
				this.$http({
					url: this.$api.couponUrl + 'getoperatorcouponlist',
					data: {
						operaId: this.operaId,
						page: this.page,
						rows: this.$tmp.ROWS_RET
					},
					showLogin: 0
				}).then(res => {
					let arr = res;
					if(arr && arr.length > 0) {
						this.lists = this.lists.concat(arr);
						this.page += 1;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	$bg-page: #FED8B7;
	
	page {
		background-color: $bg-page;
	}
	
	/* 顶部 */
	.top {
		width: 750rpx;
		height: 826rpx;
		background-color: $bg-page;
		background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15Uuo6AA1NZAAL8_BGYQjI502.png');
		.msg {
			width: 630rpx;
			height: 240rpx;
			margin-top: 586rpx;
			margin-left: 60rpx;
			background-color: $bg-page;
			background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15UutuAcQlLAAByAbI1tZc197.png');
			.item {
				display: inline-block;
				margin-top: 90rpx;
				margin-left: 152rpx;
				.t1 {
					font-size: 30rpx;
				}
				.t2 {
					margin-top: 30rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.t3 {
						color: #AF4009;
					}
					.icon {
						width: 13rpx;
						height: 22rpx;
						margin-left: 12rpx;
						background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15U03-AaOHBAAACGimEkCo622.png');
					}
				}
			}
			.item.l2 {
				margin-left: 184rpx;
			}
		}
	}
	
	/* 福利一 */
	.fuli-1 {
		width: 630rpx;
		height: 703rpx;
		margin-top: 46rpx;
		margin-left: 60rpx;
		margin-right: 60rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15UvF6ACVJVAAHKemABdMQ684.png');
		.btn {
			width: 547rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			margin-top: 603rpx;
			margin-left: 41rpx;
			font-size: 36rpx;
			color: $color-white;
			background-color: #D06318;
			border-radius: 30rpx;
		}
	}
	
	/* 福利二 */
	.fuli-2 {
		width: 750rpx;
		margin-top: 46rpx;
		.img-1 {
			width: 630rpx;
			height: 49rpx;
			margin-left: 61rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15WI3GAPArdAAAUF9RDjHQ178.png');
		}
		.info {
			width: 580rpx;
			margin-top: -10rpx;
			padding-top: 26rpx;
			margin-left: 86rpx;
			background-color: #FFF7ED;
			border-radius: 0 0 $border-radius-bm $border-radius-bm;
			.tip-1 {
				width: 218rpx;
				height: 36rpx;
				margin-left: 180rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15UvfKAZivOAAAWUBD5TSY579.png');
			}
			.tip-2 {
				width: 100%;
				text-align: center;
				color: #CF4703;
				font-size: 30rpx;
				margin-top: 39rpx;
			}
		}
	}
	
	/* 优惠券 */
	.ticket-list {
		width: 100%;
		padding: 30rpx 8rpx;
		.item {
			display: flex;
			flex-direction: row;
			width: 564rpx;
			height: 190rpx;
			padding: 10rpx;
			margin: 8rpx 0;
			background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15UyDGAUawTAAAib7UahR0786.png');
			.left {
				width: 130rpx;
				.mey {
					width: 100%;
					margin-top: 40rpx;
					color: $color-white;
					text-align: center;
					.icon-1 {
						font-size: 22rpx;
						font-weight: 600;
					}
					.text-1 {
						font-size: 36rpx;
						margin-left: 4rpx;
					}
					.text-1.t2 {
						font-size: 26rpx;
					}
				}
				.fs{
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					margin-top: 20rpx;
				}
				.text-2 {
					color: $color-white;
					font-size: 24rpx;
				}
				.icon-2 {
					width: 12rpx;
					height: 21rpx;
					margin-left: 8rpx;
					background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14T_62ADVMnAAAA5kpefWc398.png');
				}
			}
			.middle {
				flex: 1;
				padding-left: 20rpx;
				
				.text-1 {
					margin-top: 22rpx;
					font-size: 24rpx;
				}
				.text-2 {
					margin-top: 20rpx;
					font-size: 24rpx;
				}
				.text-3 {
					margin-top: 20rpx;
					font-size: 22rpx;
				}
			}
			.right {
				width: 80rpx;
				height: 44rpx;
				line-height: 46rpx;
				text-align: center;
				font-size: 24rpx;
				color: $color-white;
				margin-top: 74rpx;
				margin-right: 20rpx;
				border-radius: $border-radius-sm;
			}
			.right.bg1 {
				background: $color-text-primary;
			}
			.right.bg2 {
				background: $color-disable;
			}
		}
	}
	.no-ticket-list {
		width: 100%;
		padding: 60rpx 0;
		text-align: center;
		color: $color-grey-dark;
	}
	
	/* 领取成功后的弹窗 */
	._popup.center {
		padding-top: 0;
		justify-content: center;
	}
	.popup-info {
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 510rpx;
		height: 450rpx;
		background-color: transparent;
		background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky14VOoGAUmItAABzTFb9ICw538.png');
		.t1 {
			margin-top: 180rpx;
			font-size: 36rpx;
		}
		.t2 {
			margin-top: 36rpx;
			color: $color-grey-dark;
		}
		.btn_submit_popup {
			margin-top: 50rpx;
		}
	}
	
	/* 分享 */
	.share-blank {
		width: 750rpx;
		height: 200rpx;
	}
	.share {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 50rpx;
		z-index: $z-index-public;
		text-align: center;
		.btn {
			width: 630rpx;
			height: 100rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky154fjKAbd3VAABA-hZwwhA015.png');
		}
	}
</style>
